<template>
	<view class="sun-wrap">
		<view v-if="svg" class="svg" v-html="svg"></view>
	</view>
</template>

<script>
import { encodeSunCode, renderSunCodeSVG } from '@/utils/suncode.js'

export default {
	name: 'SunCode',
	props: { text: { type: String, default: 'Hello Sun' }, size: { type: Number, default: 240 }, thickness: { type: Number, default: 0.9 } },
	data() { return { svg: '' } },
	watch: { text: 'render', size: 'render', thickness: 'render' },
	mounted() { this.render() },
	methods: {
		render() {
			const model = encodeSunCode(this.text)
			this.svg = renderSunCodeSVG(model, this.size, { thickness: this.thickness })
		}
	}
}
</script>

<style scoped>
.sun-wrap { padding: 8px; }
.svg svg { display: block; width: 100%; height: auto; }
</style>


